import React from 'react';
import { Search } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import { YunxiaoTable, Title, ButtonIcon } from '@alife/devops-ui';
import exceed from 'utils/apimap';
import utils from 'utils';
import debounce from 'lodash.debounce';
import ListEmpty from 'atComponents/ListEmpty';
import intl from '../../../../../../../../../../locale';

const { id: org_id } = window.FORCE.organization;

export default class Repos extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      order_by: 'issue_num',
      sort: 'desc',
      search: '',
      page: 1,
      isLoading: true,
      showSearch: false,
    };

    this.onSearch = debounce(this.onSearch, 500);
  }

  componentDidMount() {
    this.getInfoReportRepos(1);
  }

  // 敏感信息报表-查询代码库分页列表
  getInfoReportRepos(page) {
    const { search, order_by, sort } = this.state;
    this.setState({
      isLoading: true,
    });

    exceed
      .forceFetch({
        api: 'organization.sensitive.info_report.repo_list',
        params: {
          org_id,
        },

        data: {
          per_page: 10,
          search,
          page,
          order_by,
          sort,
        },
      })
      .then((result) => {
        const { list } = result;
        const total = result.amount || 0;
        this.setState({
          tableData: list,
          isLoading: false,
          total,
          page,
        });
      });
  }

  onPageNoChange = (page) => {
    this.getInfoReportRepos(page);
  };

  onSearch = (value) => {
    this.setState({ search: value }, () => {
      this.getInfoReportRepos(1);
    });
  };

  onSort = (dataIndex, order) => {
    this.setState(
      {
        sort: order,
        order_by: dataIndex,
      },

      () => {
        this.getInfoReportRepos(1);
      },
    );
  };

  render() {
    const { tableData, isLoading, total, page, showSearch, search } = this.state;
    return (
      <div className="risk-section">
        <div className="risk-section-header">
          <div style={{ color: '#8c8c8c' }}>
            {intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.repos.RankingOfDatabaseIssues',
              defaultMessage: '库问题排行',
            })}
          </div>
          <div className="risk-section-header-right">
            {showSearch ? (
              <Search
                className="risk-section-header-search"
                shape="simple"
                defaultValue={this.state.search}
                placeholder={intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.repos.SearchCodeBase',
                  defaultMessage: '搜索代码库',
                })}
                onChange={(value) => {
                  this.onSearch(value);
                }}
                onBlur={() => {
                  this.setState({ showSearch: false });
                }}
                autoFocus
              />
            ) : (
              <ButtonIcon
                name="search-line"
                onClick={() => {
                  this.setState({ showSearch: true });
                }}
              />
            )}
          </div>
        </div>
        <YunxiaoTable
          className={'repos-table'}
          hasBorder
          dataSource={tableData}
          loading={isLoading}
          onSort={this.onSort}
          emptyContent={
            <ListEmpty
              content={
                search
                  ? null
                  : intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.repos.NoData',
                      defaultMessage: '暂无数据',
                    })
              }
              desc={
                search
                  ? intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.repos.NoSearchResultsAreFound',
                      defaultMessage: '暂无搜索结果',
                    })
                  : null
              }
              imgType="search"
              className="table-list-empty"
            />
          }
          initialOrder="asc"
        >
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.repos.CodeBase',
              defaultMessage: '代码库',
            })}
            dataIndex="project_name"
            cell={(value, index, record) => {
              return (
                <Title
                  trigger={
                    <a
                      href={`/${record.organization_id}/${record.project_path}/project_security`}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {record.project_name}
                    </a>
                  }
                >
                  <div>{record.project_name}</div>
                </Title>
              );
            }}
            className="repo-col"
            width={300}
          />

          <YunxiaoTable.Column
            title="Blocker"
            dataIndex="blocker_num"
            width={140}
            sortable
            initialOrder="asc"
          />

          <YunxiaoTable.Column title="Critical" dataIndex="critica_num" width={140} />
          <YunxiaoTable.Column title="Major" dataIndex="major_num" width={140} />
          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.repos.TotalNumberOfQuestions',
              defaultMessage: '问题总数',
            })}
            dataIndex="issue_num"
            width={140}
            sortable
            initialOrder="asc"
          />

          <YunxiaoTable.Column
            title={intl.get({
              id: 'code-assets.containers.sensitiveInfoReport.repos.Openness',
              defaultMessage: '公开性',
            })}
            cell={(value, index, record) => {
              return utils.getVisibilityLevelsText(record.visibility_level);
            }}
            width={140}
          />
        </YunxiaoTable>
        <Pagination
          onChange={this.onPageNoChange}
          current={page}
          total={total}
          showJump={false}
          hideOnlyOnePage
        />
      </div>
    );
  }
}
